<template>
  <el-tag
    :type="tagType"
    :effect="effect"
    :size="size"
    class="status-tag"
  >
    <slot>{{ displayText }}</slot>
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ProjectStatus } from '@/model/project-model'
import { DeployStatus, DeployEnvironment } from '@/model/deploy-model'

defineOptions({
  name: 'StatusTag'
})

const props = defineProps({
  // 状态类型：project（项目）| deploy（部署）| environment（环境）
  type: {
    type: String,
    default: 'project'
  },
  // 状态值
  status: {
    type: String,
    required: true
  },
  // 标签效果
  effect: {
    type: String,
    default: 'light'
  },
  // 标签大小
  size: {
    type: String,
    default: 'default'
  }
})

// 根据状态类型和值计算标签类型
const tagType = computed(() => {
  if (props.type === 'project') {
    switch (props.status) {
      case ProjectStatus.ACTIVE:
        return 'success'
      case ProjectStatus.DRAFT:
        return 'info'
      case ProjectStatus.ARCHIVED:
        return 'danger'
      default:
        return ''
    }
  } else if (props.type === 'deploy') {
    switch (props.status) {
      case DeployStatus.SUCCESS:
        return 'success'
      case DeployStatus.PROCESSING:
        return 'warning'
      case DeployStatus.PENDING:
        return 'info'
      case DeployStatus.FAILED:
        return 'danger'
      default:
        return ''
    }
  } else if (props.type === 'environment') {
    switch (props.status) {
      case DeployEnvironment.DEVELOPMENT:
        return 'info'
      case DeployEnvironment.TESTING:
        return 'warning'
      case DeployEnvironment.PRODUCTION:
        return 'danger'
      default:
        return ''
    }
  }
  return ''
})

// 根据状态类型和值计算显示文字
const displayText = computed(() => {
  if (props.type === 'project') {
    switch (props.status) {
      case ProjectStatus.ACTIVE:
        return '已激活'
      case ProjectStatus.DRAFT:
        return '草稿'
      case ProjectStatus.ARCHIVED:
        return '已归档'
      default:
        return props.status
    }
  } else if (props.type === 'deploy') {
    switch (props.status) {
      case DeployStatus.SUCCESS:
        return '成功'
      case DeployStatus.PROCESSING:
        return '部署中'
      case DeployStatus.PENDING:
        return '待部署'
      case DeployStatus.FAILED:
        return '失败'
      default:
        return props.status
    }
  } else if (props.type === 'environment') {
    switch (props.status) {
      case DeployEnvironment.DEVELOPMENT:
        return '开发环境'
      case DeployEnvironment.TESTING:
        return '测试环境'
      case DeployEnvironment.PRODUCTION:
        return '生产环境'
      default:
        return props.status
    }
  }
  return props.status
})
</script>

<style scoped lang="scss">
.status-tag {
  min-width: 70px;
  text-align: center;
}
</style>
